<template>

  <el-drawer
      v-model="drawer"
      title="简易搜索面板"
      direction="ltr"
      :lock-scroll="false"
  >
    <Search @add="add"></Search>
  </el-drawer>

  <div class="layui-side">
    <div class="aside">
      <el-button type="primary" @click="drawer=true" round>搜索面板</el-button>
    </div>
    <div class="aside">
      <el-button @click="dialogVisible=true" round>帮助文档</el-button>
    </div>
    <div class="aside">
      <el-button type="success" round @click="submitApply">提交申请</el-button>
    </div>
    
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="帮助文档"
      width="50%"
  >
    <div style="text-align: left;margin: 10px;font-size: 20px">
      <div class="help">●添加文献申请和修改文献申请必须填写——<span class="important">
        标题，摘要，发表日期和作者
      </span>。</div>
      <div class="help">●填写 <span class="important">备注信息 </span> 可以让管理员更方便地审核你的申请</div>
      <div class="help">●为保证所填写信息均存在于本系统的数据库中，部分字段的填写需要在左侧<span class="important">搜索面板</span>中
        输入名称得到系统搜索结果后，点击搜索条目右侧的 <span class="important">添加按钮</span> ，所选条目将自动填入。系统将会筛选出最符合搜索条件的前
        <span class="important">10</span>
        条记录供用户选择。
        点击右侧 <span class="important">搜索面板按钮</span>可以打开左侧搜索面板。
      </div>
      <div class="help">
        ●<span class="important">期刊、会议录、会议</span> 字段需要在搜索面板的对应的字段下进行搜索添加。
      </div>
      <div class="help">
        ●<span class="important">作者</span>
        字段在搜索面板中添加后，系统将会自动将所选条目插入至作者最后一条，会显示学者的编号和姓名，点击可跳转至 <span class="important">学者门户页面</span> 。右侧的
        <span class="important">数字选择器</span>可以编辑此学者为第几作者。点击 <span class="important">删除按钮</span>可以删除相应条目。
      </div>
      <div class="help">
        ●<span class="important">学科领域</span>字段在搜索面板中添加后，系统将会自动将所选条目插入学科领域最后一条，会显示学科领域的编号和名称。
        点击 <span class="important">删除按钮</span>可以删除相应条目。
      </div>
      <div class="help">
        ●<span class="important">参考文献</span>字段在搜索面板中添加后，系统将会自动将所选条目插入参考文献最后一条，会显示文献标题。
        点击可跳转至 <span class="important">文献详情页面</span>
        点击 <span class="important">删除按钮</span>可以删除相应条目。
      </div>
      
      <div>
        ●对于不在搜索结果中的相关数据，请先放弃提交申请，等待后续系统数据库更新。
      </div>
    </div>
    
  </el-dialog>
  
  <div>
    
    <div class="title">
      <span v-if="submit.type==='add'">添加文献申请</span>
      <span v-else>修改文献申请</span>
      
    </div>
    <div style="color: red;margin-top: 10px;margin-bottom: 10px" @click="dialogVisible=true">
      编辑信息前请先阅读帮助文档
    </div>
    
    <div v-if="submit.type==='update'">
      <el-card shadow="always">
        <el-descriptions
            title="原文献信息"
            :column="1"
            border
            style="font-size: 16px;word-break: break-word;"
        >

          <el-descriptions-item>
            <template #label>
              <span class="label">文献编号</span>
            </template>
            <el-link :href="'/detail?paperId='+paper.paperId" target="_blank">
            <span class="link">
              {{paper.paperId}}
            </span>
            </el-link>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">doi</span>
            </template>
            {{paper.doi}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">文献类型</span>
            </template>
            {{docType(paper.docType)}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">标题 </span>
            </template>
            {{paper.title}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">摘要 </span>
            </template>
            {{paper.abstract_}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">发表日期 </span>
            </template>
            {{paper.date}}
          </el-descriptions-item>

          <el-descriptions-item v-if="paper.docType===1">
            <template #label>
              <span class="label">期刊 </span>
            </template>
            {{paper.journal}}
          </el-descriptions-item>

          <template v-else>
            <el-descriptions-item>
              <template #label>
                <span class="label">会议录 </span>
              </template>
              {{paper.conferenceSeries}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <span class="label">会议 </span>
              </template>
              {{paper.conferenceSeries}}
            </el-descriptions-item>
          </template>

          <el-descriptions-item>
            <template #label>
              <span class="label">卷/册</span>
            </template>
            {{paper.volume}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">起止页</span>
            </template>
            {{paper.firstPage}}————{{paper.lastPage}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">作者 </span>
            </template>
            <div v-for="(item,index) in paper.authors">
              <el-link :href="'/portal?authorId='+item.authorId" target="_blank">
                <span class="link">
                  {{item.authorId}}——{{item.name}}——{{item.authorSequence}}
                </span>
              </el-link>
              <div class="clear"></div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">学科领域</span>
            </template>
            <div v-for="(item,index) in paper.fields">
              {{item.name}}
              <div class="clear"></div>
            </div>
          </el-descriptions-item>


          <el-descriptions-item>
            <template #label>
              <span class="label">参考文献</span>
            </template>
            <div v-for="(item,index) in paper.references">
              <el-link :href="'/detail?paperId='+item.paperId" target="_blank">
                <span class="link">
                  [{{index+1}}]{{item.title}}
                </span>
              </el-link>
              <div class="clear"></div>
            </div>
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
      
      
    </div>
    <el-divider></el-divider>
    <div>
      <el-card shadow="always">
        <el-descriptions
            title="编辑信息"
            :column="1"
            border
            style="font-size: 16px;word-break: break-word;"
        >

          <el-descriptions-item>
            <template #label>
              <span class="label" style="color: blue">备注信息</span>
            </template>
            <el-input
                v-model="submit.other"
                :rows="2"
                type="textarea"
                placeholder="请输入备注信息"
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">doi</span>
            </template>
            <el-input v-model="submit.doi" placeholder="请输入文献doi" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">文献类型</span>
            </template>
            <el-select v-model="submit.docType" placeholder="Select">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">标题 <span style="color: red;font-weight: bold">*</span></span>
            </template>
            <el-input v-model="submit.title" placeholder="请输入文献标题" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">摘要 <span style="color: red;font-weight: bold">*</span></span>
            </template>
            <el-input
                v-model="submit.abstract_"
                :rows="5"
                type="textarea"
                placeholder="请输入文献摘要"
            />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">发表日期 <span style="color: red;font-weight: bold">*</span></span>
            </template>
            <el-date-picker v-model="submit.date" type="date" placeholder="请选择发表日期" format="YYYY-MM-DD">
            </el-date-picker>
          </el-descriptions-item>

          <el-descriptions-item v-if="submit.docType===1">
            <template #label>
              <span class="label">期刊 </span>
            </template>
            {{submit.journal}}
          </el-descriptions-item>

          <template v-else>
            <el-descriptions-item>
              <template #label>
                <span class="label">会议录 </span>
              </template>
              {{submit.conferenceSeries}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <span class="label">会议 </span>
              </template>
              {{submit.conferenceSeries}}
            </el-descriptions-item>
          </template>

          <el-descriptions-item>
            <template #label>
              <span class="label">卷/册</span>
            </template>
            <el-input v-model="submit.volume" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">起止页</span>
            </template>
            <span class="lay">
            <el-input-number v-model="submit.firstPage" :min="1" />
          </span>
            <span class="lay">
            ————
          </span>
            <span class="lay">
            <el-input-number v-model="submit.lastPage" :min="1" />
          </span>

          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>

              <span class="label">作者 <span style="color: red;font-weight: bold">*</span></span>
            </template>
            <div v-for="(item,index) in authors">
            <span class="lay">
              <el-link :href="'/portal?authorId='+item.authorId" target="_blank">
                <span class="link">
                  {{item.authorId}}——{{item.name}}
                </span>
              </el-link>
            </span>

              <span class="layright">
              <el-button type="danger" icon="el-icon-delete" circle @click="remove(authors,index)" size="small"></el-button>
            </span>
              <span class="layright">
              <el-input-number v-model="item.authorSequence" :min="1" size="small"/>
            </span>
              <div class="clear"></div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <span class="label">学科领域</span>
            </template>
            <div v-for="(item,index) in fields">
            <span class="lay">
              {{item.fieldId}}——
            </span>
              <span class="lay">
              {{item.name}}
            </span>
              <span class="layright">
              <el-button type="danger" icon="el-icon-delete" circle @click="remove(fields,index)" size="small"></el-button>
            </span>
              <div class="clear"></div>
            </div>
          </el-descriptions-item>


          <el-descriptions-item>
            <template #label>
              <span class="label">参考文献</span>
            </template>
            <div v-for="(item,index) in references">
            <span class="lay">
              <el-link :href="'/detail?paperId='+item.paperId" target="_blank">
                <span class="link">
                  [{{index+1}}]{{item.title}}
                </span>
              </el-link>
            </span>
              <span class="layright">
              <el-button type="danger" icon="el-icon-delete" circle @click="remove(references,index)" size="small"></el-button>
            </span>
              <div class="clear"></div>
            </div>
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
      
    </div>
  </div>

  
</template>

<script>
import qs from "qs";
import axios from "../../utils/MyAxios";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";

import Search from "./Search";
import {h} from "vue";
export default {
  name: "Apply",
  
  created() {
    let path = this.$route.path;
    // console.log(path);
    this.submit.authorId = this.$route.query.authorId;
    if(path==="/apply/add"){
      this.submit.type = "add";
    }else if(path==="/apply/update"){
      this.submit.type = "update";
      this.submit.paperId = this.$route.query.paperId;
      
      if(this.submit.paperId===null||this.submit.paperId===undefined){
        window.open("/index","_self")
      }
      
      this.getPaper();
    }
  },
  data(){
    return{
      dialogVisible:false,
      drawer: false,
      options:[
        {
          label: "期刊文献",
          value: 1
        },
        {
          label: "会议文献",
          value: 2
        }
      ],
      submit:{
        token: localStorage.getItem("token"),
        paperId: null,
        type: null,
        authorId:null,
        other: "",
        
        doi:"",
        docType: 1,
        title: "",
        abstract_: "",
        date: null,
        volume: "",
        issue: "",
        firstPage: 0,
        lastPage: 0,
        journalId: null,
        journal: null,
        conferenceSeriesId:null,
        conferenceSeries: null,
        conferenceInstance: null,
        conferenceInstanceId: null,
        authorIds:[],
        fieldIds:[],
        referenceIds:[],
      },
      authors:[],
      fields:[],
      references:[],
      paper:{
        paperId: null,
        doi:"",
        docType: 1,
        title: "",
        abstract_: "",
        date: null,
        volume: "",
        issue: "",
        firstPage: 0,
        lastPage: 0,
        journalId: null,
        journal: null,
        conferenceSeriesId:null,
        conferenceSeries: null,
        conferenceInstanceId: null,
        conferenceInstance: null,
        authors:[],
        fields:[],
        references:[]
      }
    }
  },
  methods:{
    getPaper(){
      
      let data = {
        paperId: this.submit.paperId
      }
      axios.post("/api/apply/paper",qs.stringify(data))
      .then(res=>{
        console.log(res);
        data = res.data;
        if(data.code>0){
          ElMessage.error(data.msg)
        }else if(data.code===0){
          this.paper = data.data;
          
          this.submit.doi = this.paper.doi;
          this.submit.docType = this.paper.docType;
          this.submit.title = this.paper.title;
          this.submit.abstract_ = this.paper.abstract_;
          this.submit.volume = this.paper.volume;
          this.submit.issue = this.paper.issue;
          this.submit.firstPage = this.paper.firstPage;
          if(this.submit.firstPage!==null){
            this.submit.firstPage = parseInt(this.submit.firstPage);
          }
          this.submit.lastPage = this.paper.lastPage
          if(this.submit.lastPage!==null){
            this.submit.lastPage = parseInt(this.submit.lastPage);
          }
          this.submit.journalId = this.paper.journalId;
          this.submit.journal = this.paper.journal;
          this.submit.conferenceSeriesId = this.paper.conferenceSeriesId;
          this.submit.conferenceSeries = this.paper.conferenceSeries;
          this.submit.conferenceInstanceId = this.paper.conferenceInstanceId;
          this.submit.conferenceInstance = this.paper.conferenceInstance;
          
          this.authors = this.paper.authors;
          this.fields = this.paper.fields;
          this.references = this.paper.references;
        }
      })
    },
    missingNotify(s){
      ElNotification({
        title: '缺少必填项',
        message: h('i', { style: 'color: teal' }, s),
      })
    },
    check(){
      let flag = true;
      if(this.submit.title===null||this.submit.title===''){
        this.missingNotify("标题未填写")
        flag = false;
      }
      
      if(this.submit.abstract_===null||this.submit.abstract_===''){
        this.missingNotify("摘要未填写")
        flag = false;
      }
      
      if(this.submit.date===null||this.submit.date===''){
        this.missingNotify("日期未填写")
        flag = false;
      }
      
      if(this.authors.length===0){
        this.missingNotify("作者未填写")
        flag = false;
      }
      
      return flag;
    },
    submitApply(){
      if(!this.check()){
        return;
      }

      ElMessageBox.confirm(
          '是否确认提交申请？',
          '是否确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(()=>{
        let data = this.submit;
        data.authorIds = this.authors.map(item=>{
          return{
            authorId: item.authorId,
            authorSequence: item.authorSequence
          }
        });
        data.fieldIds = this.fields.map(item=>{
          return item.fieldId;
        });

        data.referenceIds = this.references.map(item=>{
          return item.paperId;
        });


        axios.post("/api/apply/manage",data)
            .then(res=>{
              console.log(res);
              data = res.data;
              if(data.code>0){
                ElMessage.error(data.msg)
              }else if(data.code === 0){
                ElMessage.success("提交成功")
                setTimeout(()=>{
                  window.close();
                },2000)
              }
            })
      })
      
      
    },
    add(which,id,value){
      switch (which){
        case "paper":
          this.references.push({
            paperId:id,
            title: value
          })
          break;
        case "author":
          this.authors.push({
            authorId: id,
            name: value,
            authorSequence: this.authors.length+1
          })
          break
        case "journal":
          this.submit.journalId = id;
          this.submit.journal = value;
          break;
        case "series":
          this.submit.conferenceSeriesId = id;
          this.submit.conferenceSeries = value;
          break;
        case "instance":
          this.submit.conferenceInstanceId = id;
          this.submit.conferenceInstance = value;
          break;
        case "field":
          this.fields.push({
            fieldId: id,
            name: value
          })
          break;
      }
    },
    remove(array,index){
      array.splice(index,1);
    },
    docType(docType){
      if(docType===1){
        return "期刊文献"
      }else if(docType===2){
        return "会议文献"
      }
    }
  },
  components:{
    Search
  }
}
</script>

<style scoped>
.label{
  word-break: keep-all;
}
.link{
  font-size: 16px;
}
.lay{
  float: left;
}
.layright{
  float: right;
}
.clear{
  clear: both;
  border-bottom: 2px solid #e5e9ef;
}
.title{
  font-size: 36px;
  color: #4ab3fa;
  font-weight: bold;
}
.layui-side{
  position:fixed;
  width:200px;
  top:40%;
  bottom:40%;
  right: 0;
  background-color: #e0faff;
  border: 2px solid #cee3fa;
}
.aside{
  margin-top: 10px;
}
.help{
  margin-bottom: 5px;
}
.important{
  color: red;
}
</style>